<template>
  <!-- 新增企业 表单 -->
  <a-modal
    v-model:open="visible"
    :title="状态管理配置"
    class="addRule"
    destroyOnClose
    :width="520"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="configForm"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="状态名称" name="statusNameId">
        <a-select
          ref="select"
          v-model:value="configForm.statusNameId"
          class="formSelect"
          placeholder="请选择"
          @change="changeStatuName(configForm.statusNameId)"
        >
          <a-select-option
            v-for="item in listWarnName"
            :value="item.val"
            :key="item.val"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态分类" name="statusType">
        <a-select
          ref="select"
          v-model:value="configForm.statusType"
          class="formSelect"
          placeholder="请选择"
          :disabled="!configForm.statusNameId"
        >
          <a-select-option
            v-for="item in listWarnType"
            :value="item.val"
            :key="item.val"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="告警规则名称" name="ruleIds">
        <a-select
          v-model:value="configForm.ruleIds"
          mode="multiple"
          show-search
          placeholder="请输入或者选择"
          @search="handleSearchRuleName"
          @focus="handleFocus"
          class="formSelect"
        >
          <a-select-option
            v-for="item in ruleNameOptions"
            :key="item.id"
            :value="item.id"
          >
            {{ item.ruleName }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>

import {
  COMMUNICATION_ALARMS,
  EFFECT_TIME_LIST,
  IS_AUTO_WORK_ORDER_LIST,
  JUDGE_CONDITION_LIST,
  KEEP_MINUTE_LIST,
  RULE_STATUS_LIST,
  RULE_TYPE_LIST,
  SECURITY_ALARMS,
  SILENT_MINUTE_LIST,
  WARN_EQUIP_LEVEL_LIST,
  WARN_LEVEL_LIST,
  WARN_STATUS_NAME,
} from "@/constants/stationConfig.js"
const $api = inject("$api")
const props = defineProps({
  statusConfigVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array,
    default: [],
  },
})
const loading = ref(false)
const visible = ref(props.statusConfigVisible)
const emits = defineEmits(["update:statusConfigVisible", "getWarnRuleList"])
watch(
  () => props.statusConfigVisible,
  (val) => {
    console.log(val)
    visible.value = val
  }
)

const labelCol = { style: { width: "100px" } }
const formRef = ref(null)
const form = ref({
  projectName: null,
  longitude: null,
  latitude: null,
  provId: null,
  cityId: null,
  countyId: null,
  address: null,
})
const rules = ref({
  statusNameId: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  statusType: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  ruleIds: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
})

const cancel = () => {
  emits("update:statusConfigVisible", false)
  configForm.value.statusNameId = null
  configForm.value.statusType = null
  configForm.value.ruleIds = []
}
const configForm = ref({
  statusNameId: null,
  statusType: null,
  ruleIds: [],
})
const handleSubmit = async () => {
  const params = {
    warnType: configForm.value.statusType,
    ruleIds: configForm.value.ruleIds,
  }

  const res = await $api.statusConfig(params)
  loading.value = false
  if (res.code === 0) {
    message.success("配置成功")
    cancel()
  }
  emits("getWarnRuleList")
}

const ruleNameOptions = ref([])

const handleSearchRuleName = async (ruleName) => {
  const params = {
    ruleName: ruleName,
  }
  const res = await $api.fuzzyQueryRuleName(params)
  ruleNameOptions.value = res.data.map((item) => ({
    ruleName: item.ruleName,
    id: item.id,
  }))
}
const handleFocus = async () => {
  const params = {
    ruleName: "",
  }
  const res = await $api.fuzzyQueryRuleName(params)
  ruleNameOptions.value = res.data.map((item) => ({
    ruleName: item.ruleName,
    id: item.id,
  }))
}

const listWarnType = ref([])
const listWarnName = ref([])
/* const getListWarnType = async (list) => {
  const res = await $api.listWarnType()
  if (res && res.code === 0) {
    listWarnName.value = res.data
  }
} */
watch(
  () => props.list,
  (val) => {
    listWarnName.value = val
  },
  {
    immediate: true,
  }
)
//切换名称获取
const changeStatuName = (id) => {
  console.log(id)
  listWarnType.value = listWarnName.value.find(
    (item) => item.val === id
  )?.children
}
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 350px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelect {
  display: inline-block;
  width: 113px;
  margin-right: 5px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
